<template>
	<div v-if="flag" class="main">
    <div class="cont">
      <div class="cont_bg" />
      <div class="cont_bg1"></div>
    </div>
    <div class="title">魔镜魔镜告诉我</div>
    <div class="tabs">
      <div 
        class="tab_list"
        v-for="item in list.free_framework_list"
        @click="fnGetContent(item)"
        :key="item.content_type">
        {{ item.title }}
        <img src="http://content.daylucky.cn/admin/image/u5x3czf5lthe9wfalkse89yl.png" alt="" class="next_btn">
      </div>
    </div>
    <div v-if="list.pay_framework_list && list.pay_framework_list.length" class="pay_cont pb-9">
      <div class="pay_title flex_center">解锁全部板块</div>
      <div class="flex_b_c flex_wrap pl-14 pr-13">
        <div class="pay_list flex_center flex_c mb-4" v-for="item in list.pay_framework_list" :key="item.id">
          <img class="lock" src="http://content.daylucky.cn/admin/image/85wb721vmbb5afx2pjgvmfgf.png">
          {{ item.title }}
        </div>
      </div>
    </div>
    <div v-if="list.pay_framework_list && list.pay_framework_list.length" class="pay_btn" @click="onSubmit">9.9 元全部解锁</div>
    <content-mask :owned="owned" v-model:isShow="isShow" :content="current.content" :title="current.title" />
	</div>
</template>
<script>
import contentMask from '@/components/contentMask'
import { getTitle, getContentByType } from '@/api'
import onPay from '@/utils/payment'
import { showToast } from 'vant'

export default {
  components: { 
    contentMask,
  },
  data() {
    return {
      flag: false,
      active: 1, 
      current: {},
      list: {pay_framework_list: []},
      owned: true,
      isShow: false,
      cardLockObj: {},
    }
  },
  created() {
    try {
      this.owned = JSON.parse(this.$route.query.owned)
      console.log(JSON.parse(this.$route.query.owned), 'JSON.parse(this.$route.query)')
    } catch (error) {
      this.owned = true
    }
    // console.log(owned, this.owned, typeof this.owned,  typeof owned)
    this.fnGet()
  },
  methods: {
    async fnGet() {
      clearInterval(this.timer)
      console.log( this.owned, ' this.owned this.owned this.owned')
      const { code, data } = await getTitle({ owned: this.owned, is_iphone: false, version: 1 })
      if (code === 1000) {
        // this.list = data.pay_framework_list.concat(data.free_framework_list)
        // let { pay_framework_list, free_framework_list } = data
        // // 支付过自己的了
        // if (this.paySelfCard && this.owned) {
        //   this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
        // } else {
        //   this.list = { pay_framework_list, free_framework_list }
        // }
        this.list = data
        this.list.free_framework_list.forEach(({ content_type, content }) => {
          if (!this.cardLockObj[content_type] && content) {
            this.cardLockObj[content_type] = content
          }
        })
        this.flag = true
      }
    },
    async fnGetContent({ content_type, title }) {
      if (this.cardLockObj[content_type]) {
        this.current = { content: this.cardLockObj[content_type], title }
        this.isShow = true
        return false
      }
      showToast('魔镜分析中…请稍候')
      setTimeout(async () => {
        const { code, data } = await getContentByType({ content_type, owned: this.owned })
        if (code === 1000) {
          this.cardLockObj[content_type] = data.content
          this.current = { content: data.content, title }
          this.isShow = true
        }
      }, 2500)
    },
   
    async onSubmit() {
      onPay().then(() => {
        console.log('触发支付回调')
        let { pay_framework_list, free_framework_list } = this.list
        this.list = { free_framework_list: [ ...pay_framework_list, ...free_framework_list], pay_framework_list: [] }
      })
    },
    onBack() {
      // uni.showModal({
      //   title: '温馨提示',
      //   content: '每次解锁后请查看完毕如需保存请自行保存内容，下次进入需要重新解锁。确认关闭？',
      //   success: function (res) {
      //     if (res.confirm) {
      //       uni.reLaunch({
      //         url: "/pages/home/index"
      //       })
      //     } else if (res.cancel) {
      //       console.log('用户点击取消');
      //     }
      //   }
      // });
      
      
    },
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 30px;
  min-height: 100vh;
	background: #fff;
  
}

.cont {
  width: 80px;
  height: 140px;
  margin: 5px auto 20px;
  position: relative;
  z-index: 10;
  .cont_bg {
    position: absolute;
    width: 54px;
    height: 106px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-clip-path: ellipse(41% 50% at 50% 50%);
    clip-path: ellipse(41% 50% at 50% 50%);
    background:  url(https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif) no-repeat left top / cover;
  }
  .cont_bg1 {
    position: absolute;
    background: url('https://content.daylucky.cn/admin/image/uhh6oxnhzxo7974p30xbyaqt.png') no-repeat top left/ cover;
    width: 100%;
    height: 100%;
  }
}
.title {
  font-family: pf_bold;
  // font-weight: 600;
  font-size: 20px;
  color: #000000;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 12px;
}


.tabs {
  padding: 27px 27px 0px 27px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .tab_list {
    width: 154px;
    height: 98px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #000000;
    padding: 15px 16px 0 16px;
    font-family: pf_bold;
    margin-bottom: 16px;
    // font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 19px;
    position: relative;
    .next_btn {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 8px;
      bottom: 8px;
    }
  }
}
.pay_btn {
  width: 300px;
  height: 48px;
  margin: 0 auto 0;
  background: #000000;
  border-radius: 43px;
  text-align: center;
  line-height: 48px;
  font-family: pf_bold;
  // font-weight: 600;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
 
}



.pay_cont {
  width: 323px;
  margin: 0 auto 0;
  padding-top: 28px;
  background: url(http://content.daylucky.cn/admin/image/lw2w48p1j5sze7grhh9i2ars.png) no-repeat left top/ 321px 342px;
  position: relative;
 
  .pay_title {
    width: 323px;
    font-family: pf_bold;
    margin-bottom: 26px;
    // font-weight: 600;
    font-size: 20px;
    color: #000000;
    line-height: 28px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    &:before {
      content: '';
      width: 27px;
      height: 10px;
      display: inline-block;
      background: url('http://content.daylucky.cn/admin/image/fhj2yb2iyisowgrzs7c1hyi5.png') no-repeat left top/ cover;
      margin-right: 10px;
    }
     &:after {
      content: '';
      width: 27px;
      height: 10px;
      display: inline-block;
      background: url('http://content.daylucky.cn/admin/image/em1blynpo2ux7dpaadocmjos.png') no-repeat left top/ cover;
      margin-left: 10px;
    }
  }
  .pay_list {
    width: 143px;
    height: 98px;
    padding: 0 19px;
    background: url('http://content.daylucky.cn/admin/image/18mc13o0qy1d9jlcjikxl52w.png') no-repeat left top/ 142px 98px;
    // font-weight: 600;
    font-size: 13px;
    color: #000;
    line-height: 18px;
    margin-bottom: 12px;
    text-align: center;
    .lock {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }
  }
}


</style>